<template>
  <commonDrawer
          :title="drawerData.title"
          :drawer="drawer"
          @closeDraw="openOrCloseDrawer"
          @cancelFun="drawer=false"
          @save="save">
    <template slot="column">
      <el-form class="m7-form form-div" :model="drawerData.form" :rules="rules" ref="formRef" label-position="top" size="mini">
        <el-form-item label="电话条状态" prop="name">
          <el-input size="mini" type="text" v-model.trim="drawerData.form.name" placeholder="请输入电话条状态" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="remarks">
          <el-input size="mini" type="text" v-model.trim="drawerData.form.type" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio v-model="drawerData.form.status" label="enable">启用</el-radio>
          <el-radio v-model="drawerData.form.status" label="disable">停用</el-radio>
        </el-form-item>
      </el-form>
    </template>
  </commonDrawer>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { BasicModule } from '@/store/modules/config/basic'
import { deepClone } from '@/utils/common'
import commonDrawer from '@/common/views/drawer/index.vue'
interface DrawObj {
  title: string
  form: object
}
@Component({
  name: 'VoiceDetial',
  components: { commonDrawer }
})
export default class VoiceDetial extends Vue {
  @Prop({ default: {} }) private drawerData!: DrawObj

  private drawer: boolean = false
  private $message: any
  private rules: object = {
    name: [{ required: true, message: '必填', trigger: 'blur' }]
  }

  private openOrCloseDrawer () {
    this.drawer = !this.drawer
    this.$nextTick(() => {
      (this as any).$refs.formRef.clearValidate()
    })
  }

  private save () {
    (this as any).$refs.formRef.validate((valid: boolean) => {
      if (valid) {
        const form = deepClone(this.drawerData.form)
        delete form.type
        const data = { url: '/call/action/config/phoneBarStatus/save', method: 'POST', data: form }
        BasicModule.BasicCommonAction(data).then((res: any) => {
          if (res && res.success) {
            this.$emit('refresh')
            this.drawer = false
            this.$message({ message: '保存成功', type: 'success' })
          }
        })
      } else {
        return false
      }
    })
  }

  private handleClose () {
    this.drawer = false
  }
}
</script>
